<template>
    <div class="container">
        <div class="header">学生选课系统</div>
        <el-row>
          <el-col :span="8">
            <div class="left-panel">
              <h3>所有课程</h3>
              <el-table :data="courses" stripe>
                <el-table-column prop="id" label="课程编号"></el-table-column>
                <el-table-column prop="name" label="课程名称"></el-table-column>
                <el-table-column prop="teacher" label="授课教师"></el-table-column>
                <el-table-column prop="credits" label="学分"></el-table-column>
                <el-table-column prop="capacity" label="容量"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" v-if="!isSelected(scope.row)" @click="selectCourse(scope.row.id)">选课</el-button>
                    <el-button size="mini" v-else disabled>已选</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="8" :offset="1">
            <div class="right-panel">
              <h3>已选课程</h3>
              <el-table :data="selectedCourses" stripe>
                <el-table-column prop="id" label="课程编号"></el-table-column>
                <el-table-column prop="name" label="课程名称"></el-table-column>
                <el-table-column prop="teacher" label="授课教师"></el-table-column>
                <el-table-column prop="credits" label="学分"></el-table-column>
                <el-table-column prop="capacity" label="容量"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="deselectCourse(scope.row.id)">退选</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
</template>

<script>
export default {
    name: 'Main',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
  .container {
    margin: 20px;
  }
  
  .header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .left-panel, .right-panel {
    padding: 20px;
    border: 1px solid #ccc;
  }
  
  .left-panel h3, .right-panel h3 {
    margin-top: 0;
  }
  
  .el-table__body tr:hover {
    background-color: #f5f5f5 !important;
    cursor: pointer;
  }
  
  .el-table__row--striped:nth-child(odd) {
    background-color: #f9f9f9 !important;
  }
</style>